import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Card, Space, Row, Col, Tree, Pagination, Table, Tag, message, Button, Spin } from 'antd'
import type { DataNode } from 'antd/es/tree';
import hospitalListApi, { type PathologyListData, bookingScheduleListData, WordListDate, WordDate } from '@/api/hospital/model/hospitalList';
import type { ColumnsType } from 'antd/es/table';
import './HospitalScheduling.css'

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

export default function HospitalScheduling() {
    // 获取跳转函数
    const navigate = useNavigate()
    // 获取医院编码
    const { hoscode } = useParams()
    // 树形列表
    const [treeList, setTreeList] = useState<PathologyListData>([])
    // 默认展开的节点key
    const [expandedKeys, setExpandedKeys] = useState<string[]>([])
    // 当前页码
    const [page, setPage] = useState(1)
    // 页大小
    const [limit, setLimit] = useState(5)
    // 总数
    const [total, setTotal] = useState(0)
    // 科室code
    const [depcode, setDepcode] = useState('')
    // 默认选中子节点
    const [defaultdep, setDefaultDep] = useState<string[]>([])
    // 保存头顶的时间选项
    const [choose, setChoose] = useState<bookingScheduleListData[]>([])
    // 保存上班的时间
    const [workDate, setWordDate] = useState('')
    // 保存科室排班详情列表信息
    const [depList, setDepList] = useState<WordListDate>([])
    // 控制表格的加载状态
    const [loading, setLoading] = useState(false)
    // 保存当前的医院名称
    const [hospitalName, setHospital] = useState('')
    // 当前科室的名称
    const [depName, setDepName] = useState('')

    // 生命周期
    useEffect(() => {
        getPathologyList()
        return () => { }
        // 监视depcode  如果有值才会执行挂载
    }, [])

    // 表格渲染点
    const columns: ColumnsType<WordDate> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'name',
            align: 'center',
            render: (text, _, index) => <span>{index}</span>,
        },
        {
            title: '职称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '号源时间',
            dataIndex: 'workDate',
            key: 'workDate',
        },
        {
            title: '可预约数',
            key: 'reservedNumber',
            dataIndex: 'reservedNumber',
        },
        {
            title: '剩余预约数',
            key: 'availableNumber',
            dataIndex: 'availableNumber',
        },
        {
            title: '挂号费(元)',
            key: 'hosScheduleId',
            dataIndex: 'hosScheduleId',
        },
        {
            title: '擅长技能',
            key: 'skill',
            dataIndex: 'skill',
        },

    ];

    // 获取科室数据
    async function getPathologyList() {
        setLoading(true)
        // console.log(3233);
        try {
            const res = await hospitalListApi.getPathologyList(hoscode as string)
            // 拿回来之后给所有的一级分类都添加一个禁用
            // 使用一个新的数据接收
            let data = res
            // 用来保存一级节点的key
            let arr: string[] = []
            let def: string[] = []
            // 进行遍历 添加key和title 还有disabled  只有一级节点需要disabled=true
            // title是展示的名字 是必须的 key必须是唯一值 但是我们的depcode就是唯一值，可以作为key
            data.forEach((value, index) => {
                value.disabled = true;
                value.key = `${value.depcode} `
                value.title = value.depname
                arr.push(value.key)
                value.children.forEach(i => {
                    i.key = `${i.depcode}`
                    i.title = i.depname
                    def.push(i.key)
                })
            })
            setDefaultDep(def)
            // 将做好的数据赋值给 展开的列表
            setExpandedKeys(arr)
            // 将遍历完成的数据给我们的渲染列表
            setTreeList(data)
            // 每次点击之前都把上一次的列表清空
            setDepList([])
            // 暂时默认选中第一个子节点
            setDepcode(data[0].children[0].key as string)
            // 保存科室名称
            setDepName(data[0].children[0].depname)
            // console.log(data);
            // 由于我们需要等待科室数据，但是我们需要使用这里的数据，所以直接获取数据就好了
            await getDepData({ depcode: data[0].children[0].key as string })
            setLoading(false)
        } catch (error) {

        }
    }
    // 获取科室列表规则数据
    async function getDepData({ depcode }: { depcode: string }) {
        setChoose([])
        setDepList([])
        // 请求数据的时候把加载打开
        setLoading(true)
        try {
            const res = await hospitalListApi.getWordRlue({ page, limit, hoscode: hoscode as string, depcode })
            // console.log(res);
            setTotal(res.total)
            setWordDate(res.bookingScheduleList[0].workDate)
            let arr = res.bookingScheduleList.map(i => {
                return {
                    ...i,
                    active: 'active',
                }
            })
            setChoose(arr)
            setHospital(res.baseMap.hosname)
            await getDepWordDate({ depcode, workDate: res.bookingScheduleList[0].workDate })
            if (!res.bookingScheduleList.length) {
                //清空排班详情
                setDepList([])
                setLoading(false)
                return message.error('当前科室暂无数据')
            }
            setLoading(false)
        } catch (error) {

        }
    }
    // 获取科室的排班时间列表
    async function getDepWordDate({ depcode, workDate }: { depcode: string, workDate: string }) {
        setLoading(true)
        setDepList([])
        try {
            if (workDate) {
                const res = await hospitalListApi.getWordDate({ hoscode: hoscode as string, depcode, workDate })
                // console.log(res);
                setDepList(res)
                setLoading(false)
            }


        } catch (error) {

        }
    }
    // 点击头部其他的时候
    return (
        <Card>
            <Space>
                选择：<span>{hospitalName}</span>/<span>{depName}</span>/<span>{workDate}</span>
            </Space>
            {/* 下方的树形分支和排班 */}

            <Row style={{ marginTop: 10 }}>
                {/* 树形列表 */}
                <Col span={6}>
                    <div className='TreeBox'>
                        <Tree treeData={treeList} height={715} defaultExpandAll selectedKeys={defaultdep} autoExpandParent expandedKeys={expandedKeys} onSelect={(selectedKeys, info) => {
                            // 根据拿到的key去发送请求  因为key是我们的科室code
                            // console.log(selectedKeys, info);
                            // 点击其他的科室就重新改变科室code
                            // console.log(info);
                            setDefaultDep([info.node.key as string])
                            setDepcode(info.node.key as string)
                            getDepData({ depcode: info.node.key as string })
                            setDepName(info.node.title as string)
                        }} checkStrictly />
                    </div>
                </Col>
                {/* 右侧表格 */}
                <Col style={{ marginLeft: 20 }} span={16} >
                    <Space>
                        {choose.map((item, index) => (
                            <Tag className={`box ${item.workDate === workDate ? 'active' : ''}`} key={item.workDate} onClick={async (e) => {
                                setWordDate(item.workDate)
                                // 改变了当前的时间之后根据最新的时间去获取数据
                                await getDepWordDate({ workDate: item.workDate, depcode })
                            }} >
                                <span>{item.workDate}</span><span>周三</span>
                                <div>{item.availableNumber} / {item.reservedNumber}</div>
                            </Tag>
                        ))}
                    </Space>

                    {/* 做好表格再做这个，因为感觉直接做这个标题做不了 */}
                    <Pagination current={page} pageSize={limit} total={total} style={{ margin: '20px 0' }} onChange={async (page, pageSize) => {
                        setPage(page)
                        setLimit(pageSize)
                        await getDepData({ depcode })
                    }} />
                    <Spin spinning={loading} wrapperClassName='loadings' delay={300} size='large'>
                        <Table columns={columns} dataSource={depList} pagination={false} bordered rowKey={'id'} />
                    </Spin>
                    <Button style={{ marginTop: 20 }} onClick={() => {
                        navigate('/syt/hospital/hospitalList')
                    }}>返回</Button>
                </Col>
            </Row>
        </Card >
    )
}
